
<template>
  <Header @goShoppingCard="goShoppingCard" />
  <Nav v-if="!data.isShowTypeNav" />
  <router-view></router-view>
  <Footer />
</template>

<script lang="ts">
import request from '@/API/entry'
import type TypeSum from './TypeSum/entry';
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import bus from '@/EventBus/EventBus'
import { haveMarkId } from '@/tools/local'
import { ElNotification } from 'element-plus';
import { defineComponent, defineAsyncComponent, onMounted, reactive, provide, watch, toRef, nextTick } from "vue";
import { useStore } from '@/Pstore/ShoppingStore'
const Header = defineAsyncComponent(() => import('./components/Header/Header.vue'))
const ListView = defineAsyncComponent(() => import('./components/ListView/ListView.vue'))
const Footer = defineAsyncComponent(() => import('./components/Footer/Footer.vue'))
const Home = defineAsyncComponent(() => import('./components/Home/Home.vue'))

type AppData = TypeSum['App']['Data']
type Api = TypeSum['AxiosData']['AxiosData']

export default defineComponent({
  name: 'App',
  components: { Home, Header, ListView, Footer, },
  setup() {
    const { getTreadMark } = useStore()
    const { push } = useRouter()
    const data = reactive<AppData>({
      InterlockListData: [], isShowTypeNav: false, isShowMiniTypeNav: false
    })

    let route = useRoute()
    async function getInterlockListData() {
      try {
        let result: Api = await request.ApiRequest.requestInterlockListData()
        if (result.status == 200 || result.code == 200) {
          data.InterlockListData = result.data as any
        }
        else ElMessage.warning('请检查网路连接')
      } catch (err) {
        ElMessage.error(`请检查错误${err}`)
      }
    }

    watch(route, () => {
      route.meta.showNav ? data.isShowTypeNav = true : data.isShowTypeNav = false
      nextTick(() => {
        if (typeof route.meta.asyncTitel == 'boolean') {
          bus.emit('showDisplay', route.meta.asyncTitel)
        }
        else { bus.emit('showDisplay', false) }
      })
    })
    async function goShoppingCard() {
      const result = await getTreadMark()
      if (result) {
        push({ name: 'shopcart' })
      } else {
        ElNotification.error({ title: '意料之外的错误', message: result })
      }
    }
    provide("goShoppingCard", goShoppingCard)
    provide("InterlockListData", toRef(data, 'InterlockListData'))
    onMounted(() => {
      getInterlockListData()
      haveMarkId()
    })
    return { data, goShoppingCard }
  },
})
</script>

<style>
</style>
